<template>
    <div class="user-avator-dropdown">
        <Dropdown @on-click="handleClick">
            <Avatar :src="userAvator"/>
            <Icon :size="18" type="md-arrow-dropdown"></Icon>
            <DropdownMenu slot="list">
                <DropdownItem name="changePassword">修改密码</DropdownItem>
                <DropdownItem name="logout">退出登录</DropdownItem>
            </DropdownMenu>
        </Dropdown>
        <Modal v-model="modal" :loading="loading" title="修改登陆密码" ok-text="确认修改"
               @on-ok="change" width="300" :mask-closable="false">
            <Form ref="form" :model="password" :rules="rule">
                <FormItem label="原密码" prop="oldPassword">
                    <Input v-model="password.oldPassword" placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem label="新密码" prop="newPassword">
                    <Input v-model="password.newPassword" placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem label="二次输入新密码" prop="rePassword">
                    <Input v-model="password.rePassword" placeholder="请输入密码"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import './user.less'
    import {mapActions} from 'vuex'
    import {password} from "../../../../api/user";

    export default {
        name: 'User',
        props: {
            userAvator: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                modal:false,
                password:{
                    oldPassword:'',
                    newPassword:'',
                    rePassword:''
                },
                loading:true,
                rule:{
                    oldPassword:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '至少输入六位', trigger: 'blur' }
                    ],
                    newPassword:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '至少输入六位', trigger: 'blur' }
                    ],
                    rePassword:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '至少输入六位', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            ...mapActions([
                'handleLogOut'
            ]),
            handleClick(name) {
                switch (name) {
                    case 'logout':
                        this.handleLogOut().then(() => {
                            this.$router.push({
                                name: 'login'
                            })
                        })
                        break
                    case 'changePassword':
                    {
                        this.modal = true
                    }
                }
            },
            change(){
                this.$refs['form'].validate(valid => {
                    if (valid){
                        if (this.password.newPassword !== this.password.rePassword){
                            this.loading = false
                            this.$nextTick(() => {
                                this.loading = true
                            })
                            this.$Message.error('二次密码不相同，请重新输入')
                            return
                        }else {
                            password(this.password).then(res => {
                                this.loading = false
                                this.$nextTick(() => {
                                    this.loading = true
                                })
                                if (res.code === 0){
                                    this.$Message.success('修改成功')
                                    setTimeout(() => {
                                        this.modal = false
                                    },1000)
                                }
                            })
                        }
                    }else {

                    }
                })
            }
        },
        mounted(){
            this.$Notice.destroy()
            this.$Notice.info({
                title: '系统升级提示',
                duration: 0,
                render: h => {
                    return h('span', [
                        h('a', {
                            on: {
                                click: () => {
                                    window.open('https://dumu.withiron.com/admin_login')
                                }
                            },
                        }, 'https://dumu.withiron.com/admin_login'),
                        h('br'), h('br'),
                        '当前版本将于不久后关闭，所有功能全部移至新版（新版将有更多功能）点击进入新版，账号密码不变'
                    ])
                }
            });
        }
    }
</script>
